<style>
    #btn-wrap{margin:100px auto;text-align:center;}
      form{
        margin:30px;
      }
    /*定位*/
      .map-location{
        width: 28px;
        height: 30px;
        position: absolute;
        top: 8px;
        right: 0px;
        z-index: 5;
        font-size: 18px;
        cursor: pointer;
      }
      .map-location-input{
        padding-right: 30px;
      }
  
    
  </style>
<div class="layuimini-container">
    <form id="app-form" class="layui-form layuimini-form">
        <div class="layui-form-item">
            <label class="layui-form-label">演艺名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" class="layui-input" lay-verify="required" placeholder="请输入景点名称" value="{$row.name}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">标题</label>
            <div class="layui-input-block">
                <input type="text" name="title" class="layui-input" lay-verify="required" placeholder="请输入标题" value="{$row.title}">
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label required">主图</label>
            <div class="layui-input-block layuimini-upload">
                <input name="image" class="layui-input layui-col-xs6" readonly lay-verify="required"  placeholder="请上传图片" value="{$row.img}">
                <div class="layuimini-upload-btn">
                    <span><a class="layui-btn" data-upload="image" data-upload-number="one" data-upload-exts="png|jpg|ico|jpeg" data-upload-icon="image"><i class="fa fa-upload"></i> 上传</a></span>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">类型</label>
                <div class="layui-input-block">
                    <input type="radio" name="type" lay-filter="levelM" class="layui-input" value="1" title="周内" {if condition="$row.type eq 1"}checked{/if} >
                    <input type="radio" name="type" lay-filter="levelM" class="layui-input" value="2" title="周末" {if condition="$row.type eq 2"}checked{/if}>
                </div>
        </div>
        <div class="layui-form-item" id="times">
            <label class="layui-form-label">预约时间</label>
            {volist name="art_time" id="v"}
            <div class="layui-input-block inp">
                <div class="layui-input-inline" style="width: 40px;">
                    <input type="text" name="start_shi" placeholder="时" value="{$v.start_shi}" autocomplete="off" class="layui-input start_shi">
                </div>
                <div class="layui-form-mid">：</div>
                <div class="layui-input-inline" style="width: 40px;">
                    <input type="text" name="start_fen" placeholder="分" value="{$v.start_fen}" autocomplete="off" class="layui-input start_fen">
                </div>
                <div class="layui-form-mid">-</div>
                <div class="layui-input-inline" style="width: 40px;">
                    <input type="text" name="end_shi" placeholder="时" value="{$v.end_shi}" autocomplete="off" class="layui-input end_shi">
                </div>
                <div class="layui-form-mid">：</div>
                <div class="layui-input-inline" style="width: 40px;">
                    <input type="text" name="end_fen" placeholder="分" value="{$v.end_fen}" autocomplete="off" class="layui-input end_fen">
                </div>
            </div>
            {/volist}
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <div class="layui-input-block">
                <button type="button" class="layui-btn" id="add_btn">
                    <i class="layui-icon">&#xe654;</i>
                </button>
                <button type="button" class="layui-btn layui-btn-primary " id="rem_btn">
                    <i class="layui-icon">&#xe640;</i>
                </button>
            </div>

        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">地址名称</label>
            <div class="layui-input-block">
                <input type="text" name="address_name" class="layui-input" lay-verify="required" placeholder="请输入地址名称" value="{$row.address_name}">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-col-md4">
            <div class="layui-form-item">
              <label class="layui-form-label layui-form-required" >经度:</label>
              <div class="layui-input-block">
                <input id="longitude" name="lng" placeholder="请输入经度" class="layui-input map-location-input"
                     lay-verType="tips" lay-verify="required" value="{$row.lng}" required/>
                <div id="locationBtn" class="layui-icon layui-icon-location map-location"></div>
              </div>
            </div>
            </div>
            <div class="layui-col-md4">
                <div class="layui-form-item">
                    <label class="layui-form-label layui-form-required" >纬度:</label>
                    <div class="layui-input-block">
                        <input id="latitude" name="lat" value="{$row.lat}" placeholder="请输入纬度" class="layui-input"
                        lay-verType="tips" lay-verify="required" required/>
                    </div>
                </div>
            </div>
        </div>  
        <div class="layui-form-item">
            <label class="layui-form-label">演出票价</label>
            <div class="layui-input-block">
                <input type="number" name="price" class="layui-input" lay-verify="required" placeholder="请输入演出票价" value="{$row.price}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">数量</label>
            <div class="layui-input-block">
                <input type="number" name="num" class="layui-input" lay-verify="required" placeholder="请输入数量" value="{$row.num}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">演出介绍</label>
            <div class="layui-input-block">
                <textarea name="desc" rows="5" class="layui-textarea" placeholder="请输入演出介绍">{$row.desc}</textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">使用说明</label>
            <div class="layui-input-block">
                <textarea name="explain" rows="5" class="layui-textarea" placeholder="请输入使用说明">{$row.explain}</textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">退改说明</label>
            <div class="layui-input-block">
                <textarea name="retreat_and_reform" rows="5" class="layui-textarea" placeholder="请输入退改说明">{$row.retreat_and_reform}</textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">其它说明</label>
            <div class="layui-input-block">
                <textarea name="other" rows="5" class="layui-textarea" placeholder="请输入其它说明">{$row.other}</textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">预约说明</label>
            <div class="layui-input-block">
                <textarea name="appointment_description" rows="5" class="layui-textarea" placeholder="请输入预约说明">{$row.appointment_description}</textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">预约须知</label>
            <div class="layui-input-block">
                <textarea name="booking_instructions" rows="5" class="layui-textarea" placeholder="请输入预约须知">{$row.booking_instructions}</textarea>
            </div>
        </div>
        <input type="hidden" name="time" id="time_val">
        <div class="layui-form-item text-center">
            <button type="submit" class="layui-btn layui-btn-normal layui-btn-sm" lay-submit>确认</button>
            <button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">重置</button>
        </div>
    </form>
</div>
<script type="text/javascript">
    layui.use('form', function(){
        var form = layui.form,
        $ = layui.$;
        var html_ = `
<div class="layui-input-block inp">
                <div class="layui-input-inline" style="width: 40px;">
                    <input type="text" name="time" placeholder="时" autocomplete="off" class="layui-input start_shi">
                </div>
                <div class="layui-form-mid">：</div>
                <div class="layui-input-inline" style="width: 40px;">
                    <input type="text" name="time" placeholder="分" autocomplete="off" class="layui-input start_fen">
                </div>
                <div class="layui-form-mid">-</div>
                <div class="layui-input-inline" style="width: 40px;">
                    <input type="text" name="time" placeholder="时" autocomplete="off" class="layui-input end_shi">
                </div>
                <div class="layui-form-mid">：</div>
                <div class="layui-input-inline" style="width: 40px;">
                    <input  type="text" name="time" placeholder="分" autocomplete="off"  class="layui-input end_fen">
                </div>
</div>`
        $('#times').append(html_)
        $('#times .end_fen').on('blur',function () {
            $('.inp').map(function () {
                var start_shi = $(this).find(".start_shi").val()
                var start_fen = $(this).find(".start_fen").val()
                var end_shi = $(this).find(".end_shi").val()
                var end_fen = $(this).find(".end_fen").val()
                if(start_shi&&start_fen&&end_shi&&end_fen){
                    var time = new Array()
                    time['start_shi'] = start_shi
                    time['start_fen'] = start_fen
                    time['end_shi'] = end_shi
                    time['end_fen'] = end_fen
                    timeArr.push(time)
                }
            })
            var newSelectProduct = { }
            for (var i = 0; i < timeArr.length; i ++) { // 遍历二维数组中的每一个成员
                newSelectProduct[i] = { };
                newSelectProduct[i]['start_shi'] = timeArr[i]['start_shi'];
                newSelectProduct[i]['start_fen'] = timeArr[i]['start_fen'];
                newSelectProduct[i]['end_shi'] = timeArr[i]['end_shi'];
                newSelectProduct[i]['end_fen'] = timeArr[i]['end_fen'];
            }
            let timeArrStr = JSON.stringify(newSelectProduct)
            $('#time_val').val(timeArrStr)
        })
        let timeArr = []
        $('#add_btn').click(function () {
            timeArr = []
            $('#times').append(html_)
            $('#times .end_fen').on('blur',function () {
                $('.inp').map(function () {
                    var start_shi = $(this).find(".start_shi").val()
                    var start_fen = $(this).find(".start_fen").val()
                    var end_shi = $(this).find(".end_shi").val()
                    var end_fen = $(this).find(".end_fen").val()
                    if(start_shi&&start_fen&&end_shi&&end_fen){
                        var time = new Array()
                        time['start_shi'] = start_shi
                        time['start_fen'] = start_fen
                        time['end_shi'] = end_shi
                        time['end_fen'] = end_fen
                        timeArr.push(time)
                    }
                })
                var newSelectProduct = { }
                for (var i = 0; i < timeArr.length; i ++) { // 遍历二维数组中的每一个成员
                    newSelectProduct[i] = { };
                    newSelectProduct[i]['start_shi'] = timeArr[i]['start_shi'];
                    newSelectProduct[i]['start_fen'] = timeArr[i]['start_fen'];
                    newSelectProduct[i]['end_shi'] = timeArr[i]['end_shi'];
                    newSelectProduct[i]['end_fen'] = timeArr[i]['end_fen'];
                }
                let timeArrStr = JSON.stringify(newSelectProduct)
                $('#time_val').val(timeArrStr)
            })
            // $('.inp').map(function () {
            //     var start_shi = $(this).find(".start_shi").val()
            //     var start_fen = $(this).find(".start_fen").val()
            //     var end_shi = $(this).find(".end_shi").val()
            //     var end_fen = $(this).find(".end_fen").val()
            //     if(start_shi&&start_fen&&end_shi&&end_fen){
            //         var time = new Array()
            //         time['start_shi'] = start_shi
            //         time['start_fen'] = start_fen
            //         time['end_shi'] = end_shi
            //         time['end_fen'] = end_fen
            //         timeArr.push(time)
            //     }
            // })

            var newSelectProduct = { }
            for (var i = 0; i < timeArr.length; i ++) { // 遍历二维数组中的每一个成员
                newSelectProduct[i] = { };
                newSelectProduct[i]['start_shi'] = timeArr[i]['start_shi'];
                newSelectProduct[i]['start_fen'] = timeArr[i]['start_fen'];
                newSelectProduct[i]['end_shi'] = timeArr[i]['end_shi'];
                newSelectProduct[i]['end_fen'] = timeArr[i]['end_fen'];
            }
            let timeArrStr = JSON.stringify(newSelectProduct)
            $('#time_val').val(timeArrStr)
        })
        $('#rem_btn').click(function () {
            $('#times>div:last-child').remove()
            timeArr.pop()
            var newSelectProduct = {}
            for (var i = 0; i < timeArr.length; i ++) { // 遍历二维数组中的每一个成员
                newSelectProduct[i] = { };
                newSelectProduct[i]['start_shi'] = timeArr[i]['start_shi'];
                newSelectProduct[i]['start_fen'] = timeArr[i]['start_fen'];
                newSelectProduct[i]['end_shi'] = timeArr[i]['end_shi'];
                newSelectProduct[i]['end_fen'] = timeArr[i]['end_fen'];
            }
            let timeArrStr = JSON.stringify(newSelectProduct)
            $('#time_val').val(timeArrStr)
        })
        //各种基于事件的操作。
        form.on('select(qwe)', function(data){
            var level = data.value;//被点击的radio的value值
            //TODO 下面是我具体业务的处理代码，可忽略 ...
            if(level == 1){
                $("#img1").show(); 
            }else{
                $("#img1").hide();
            }
        });
        form.on('submit',function () {
            console.log(123)
            // timeArr = []
            // $('.inp').map(function () {
            //     var start_shi = $(this).find(".start_shi").val()
            //     var start_fen = $(this).find(".start_fen").val()
            //     var end_shi = $(this).find(".end_shi").val()
            //     var end_fen = $(this).find(".end_fen").val()
            //     if(start_shi&&start_fen&&end_shi&&end_fen){
            //         var time = [start_shi,start_fen,end_shi,end_fen]
            //         timeArr.push(time)
            //     }
            // })
            // let timeArrStr = JSON.stringify(timeArr)
            // $('#time_val').val(timeArrStr)
            // console.log(123)
            return false;
        })

    });
     //百度地图
    layui.config({
        base : '/static/'
    }).extend({
        locationX: 'location/locationX',
        location: 'location/location',
    }).use(['layer','form','jquery','location'],function(){
        $ = layui.jquery;   
        var form = layui.form;
        var location = layui.location;

        // 自己维护初始化标注。这里给的是天安门   
        var locationData = {lng:108.946465,lat:34.347269};
        
        location.render("#locationBtn",{
            type:0,
            apiType: "baiduMap",
            coordinate: "baiduMap",
            mapType: 3,
            zoom: 15,
            title: '区域定位',
            init: function(){
                return {longitude: $("#longitude").val()?$("#longitude").val():locationData.lng,latitude: $("#latitude").val()?$("#latitude").val():locationData.lat};
            },
            success: function (data) {
                $("#longitude").val(data.lng);
                $("#latitude").val(data.lat);
            }
        });
        
    });
</script>
<style>
    .inp{
        margin: 20px!important;
        margin-left: 130px!important;
    }
</style>